<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .container {
            margin: 20px;
            width: 150px;
            height: 150px;
            position: relative;
        }
        .container2 {
            margin: 20px;
            width: 150px;
            height: 150px;
            position: relative;
        }
    </style>

</head>
<body>
    <div  class="container"></div>
    <div  class="container2"></div>
</body>
</html>

<script type="text/javascript" src="progressbar.js"></script>

<script>

    var bar = new ProgressBar.Circle('.container', {
        color: '#aaa',
        // This has to be the same size as the maximum width to
        // prevent clipping
        //trailColor: '#9CD7F1',
        strokeWidth: 4,
        trailWidth: 4,
        easing: 'easeInOut',
        duration: 1200,
        text: {
            autoStyleContainer: false,
            style: {
                // Text color.
                // Default: same as stroke color (options.color)
                color: '#aaa',
                position: 'absolute',
                left: '50%',
                top: '50%',
                padding: 0,
                margin: 0,
                fontSize: '3rem',
                fontFamily: '"Raleway", Helvetica, sans-serif',
                // You can specify styles which will be browser prefixed
                transform: {
                    prefix: true,
                    value: 'translate(-50%, -50%)'
                }
            },
        },
        from: { color: '#0D9CE0', width: 4 },
        to: { color: '#0D9CE0', width: 4 },
        // Set default step function for all animate calls
        step: function(state, circle) {
            circle.path.setAttribute('stroke', state.color);
            circle.path.setAttribute('stroke-width', state.width);

            var value = Math.round(circle.value() * 100)+'%';
            if (value === 0) {
                circle.setText('');
            } else {
                circle.setText(value);
            }

        }
    });
    bar.animate(0.05);  // Number from 0.0 to 1.0
    var bar2 = new ProgressBar.Circle('.container2', {
        color: '#aaa',
        // This has to be the same size as the maximum width to
        // prevent clipping
        //trailColor: '#9CD7F1',
        strokeWidth: 4,
        trailWidth: 4,
        easing: 'easeInOut',
        duration: 1200,
        text: {
            autoStyleContainer: false,
            style: {
                // Text color.
                // Default: same as stroke color (options.color)
                color: '#aaa',
                position: 'absolute',
                left: '50%',
                top: '50%',
                padding: 0,
                margin: 0,
                fontSize: '3rem',
                fontFamily: '"Raleway", Helvetica, sans-serif',
                // You can specify styles which will be browser prefixed
                transform: {
                    prefix: true,
                    value: 'translate(-50%, -50%)'
                }
            },
        },
        from: { color: '#0D9CE0', width: 4 },
        to: { color: '#0D9CE0', width: 4 },
        // Set default step function for all animate calls
        step: function(state, circle) {
            circle.path.setAttribute('stroke', state.color);
            circle.path.setAttribute('stroke-width', state.width);

            var value = Math.round(circle.value() * 100)+'%';
            if (value === 0) {
                circle.setText('');
            } else {
                circle.setText(value);
            }

        }
    });
    bar2.animate(0.3);  // Number from 0.0 to 1.0
</script>